<template>
  <div class="tabbar">
    <!--v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签-->
    <!--placeholder将会显示一个默认的占位文本或者图标-->
    <van-tabbar v-model="active" :placeholder="true" active-color="#ee0a24">
      <van-tabbar-item to="/recommendMusic" icon="music">推荐音乐</van-tabbar-item>
      <van-tabbar-item to="/hotSongs" icon="bars">热歌榜</van-tabbar-item>
      <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { inject,ref } from "vue";
// 通过inject注解或者构造函数参数的方式注入所需的依赖
// 这里的actived是当用户访问特定的路由时，如果该路由匹配当前的URL，
// 对应的组件就会拥有"actived"或"active"的状态，这表示它处于激活、可见或选中的状态。
const active = inject("actived");
</script>

<style lang="scss" scoped>
</style>
